<template>
    <l-layout class="l-tab-page">
      <l-panel>
        <template #title>
          <div>{{ $t("合计列表") }}</div>
          <div style="width: 560px">
            <div class="ml-8" style="float: right">
              <l-tool-btns
                :hasAdd="false"
                :hasTableSetting="true"
                @setting="handleSetting"
              />
            </div>
          </div>
        </template>
        <l-table
          ref="mainTable"
          :loading="tableLoading"
          :columns="columns"
          :dataSource="tableData"
          :showSummary="true"
        />
      </l-panel>
    </l-layout>
  </template>
  
  <script>
  const api = window.$api.demo.data;
  export default {
    data() {
      return {
        // 表格参数
        tableLoading: false,
        tableData: [],
        columns: [
          {
            label: "编码",
            prop: "num",
            width: 120,
            align: "left",
            isNotAutoWrap: true,
            fixed:true
          },
          {
            label: "名称",
            prop: "name",
            width: 300,
            align: "left",
            isNotAutoWrap: true,
            fixed:true
          },
          {
            label: "公司",
            prop: "company",
            width: 160,
            align: "left",
            fixed:true
          },
          {
            label: "联系人",
            prop: "user",
            minWidth: 70,
            align: "left",
          },
          {
            label: "金额",
            prop: "price",
            width: 80,
            align: "left",
            isSummary: true,
          },
          {
            label: "已付款",
            prop: "payed",
            width: 80,
            align: "left",
            isSummary: true,
          },
          {
            label: "未付款",
            prop: "unpay",
            width: 80,
            align: "left",
            isSummary: true,
          },
          {
            label: "支付方式",
            prop: "payType",
            minWidth: 70,
            align: "center",
          },
          {
            label: "日期",
            prop: "time",
            minWidth: 600,
            align: "left",
          },
        ],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.loadTableData();
      },
      handleSetting() {
        this.$refs.mainTable.openColumnsSetting();
      },
      handleSearch() {
        this.loadTableData();
      },
      async loadTableData() {
        this.tableLoading = true;
        let queryData = {};
        let data = await this.$awaitWraper(api.getList(queryData));
        if (data != null) {
          this.tableData = data;
        } else {
          this.tableData = [];
        }
        this.tableLoading = false;
      },
    },
  };
  </script>
  